<template>
	<view class="noticeList">
		<view class="uni-list" v-if="list.length > 0">
            <block v-for="(item,index) in list" :key="index" >
                <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(item)">
                    <view class="uni-triplex-row">
                        <view class="uni-triplex-left" :class="[item.isRead ? 'gray' : '']">
                        <!-- <view class="uni-triplex-left" :class="{'gray' : uni.getStorageSync(item.newsId)}"> -->
                            <text class="uni-title uni-ellipsis">{{item.title}}</text>
                            <text class="uni-text-small uni-ellipsis">{{item.time}}</text>
                        </view>
                        
                    </view>
                </view>
            </block>
			
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
			<view class="uni-loadmore loadfinished" v-if="finished">--没有更多数据了--</view>
        </view>
		<view class="nodata" v-if="list.length===0">
			暂无公告
		</view>		
				
	</view>
</template>

<script>
import uniLoadMore from '../../components/uni-load-more.vue';
var util = require('../../common/util.js');
export default {
    data() {
        return {
            params: {
                newsType: 'notice',
                start: 0,
                limit: 10
            },
            loading: false,
            finished: false,
            loadMoreText: '加载中...',
            showLoadMore: false,
            list: []
        };
    },
    components: {
        uniLoadMore
    },
    onLoad() {
        this.getList();
    },
    onUnload() {
        this.list = [];
        this.loadMoreText = '加载更多';
        this.showLoadMore = false;
    },
    onPullDownRefresh() {
        this.params.start = 0;
        this.getList();
        this.finished = false;
    },
    onReachBottom() {
        console.log('onReachBottom');
        if (!this.finished) {
            this.showLoadMore = true;
            setTimeout(() => {
                this.params.start += this.params.limit;
                this.getList();
            }, 300);
        }
    },
    methods: {
        formatTime(time) {
            return util.parseTime(time);
        },
        getList() {
            uni.showLoading({
                title: '正在加载...'
            });
            this.loading = true;
            util.ajax(
                'news',
                this.params,
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        console.log(json);
						if (0 == this.params.start){
							this.list = []
						}
                        for (let i = 0; i < json.data.length; i++) {
                            this.list.push({
                                newsId: json.data[i].newsId,
                                title: json.data[i].title,
                                time: this.formatTime(json.data[i].createTime),
                                isRead: uni.getStorageSync(String(json.data[i].newsId))
                            });
							
                        }
						uni.stopPullDownRefresh();
                        if (this.list.length === 0) {
                            this.nodata = true; //无数据
                        } else {
                            this.nodata = false;
                        }
                        // 加载状态结束
                        this.loading = false;
                        if (json.data.length < this.params.limit) {
                            this.finished = true;
                        }
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        goDetail(item) {
            uni.setStorageSync(String(item.newsId), true);
            item.isRead = uni.getStorageSync(String(item.newsId));
            uni.navigateTo({
                url: './noticeDetail?id=' + item.newsId
            });
        }
    }
};
</script>

<style lang="less">
page {
    background: white;
}
.uni-loadmore {
    justify-content: center;
    align-items: center;
}
.loadfinished{
	padding: 15upx 0;
	color: #CCCCCC;
	// background: #fafafa;
}
.nodata {
    height: 100%;
    margin-top: 50%;
    align-items: center;
    justify-content: center;
    color: #cccccc;
}
.noticeList {
    background: white;
    height: 100%;
    width: 100%;
    flex-direction: column;

    .uni-triplex-row {
        .uni-triplex-left {
            width: 100%;
            .uni-ellipsis {
                overflow: hidden;
                text-overflow: ellipsis; //文本溢出显示省略号
                white-space: nowrap; //文本不会换行（单行文本溢出）
                width: 100%;
            }
        }
        .gray {
            color: #cccccc;
        }
    }
}
</style>
